import React, { useEffect, useState } from 'react'
import axios from 'axios'
import './App.css'
import {BrowserRouter,Link,useNavigate,useParams} from 'react-router-dom'
import {Routes,Route,Outlet} from 'react-router'
function Tab(props){
  let [index,setindex] = useState(0)
return(
 <div className='tabbox'>
   {props.list.map(item=>{
     return <span  key={item.id} className={index==item.id?'active':''}
      onClick={()=>{ setindex(item.id)}}>{item.name}</span>
   })}
 
 </div>
)
}
function List(){
 
return(
 <div className=''>
 点餐
 
 </div>
)
}
function Home(props){
  const navigate = useNavigate()
  return(
   <div className=''>
    
   首页
   <Outlet></Outlet>
   <p onClick={()=>{
      navigate('/home/home1')
    }}>home1</p>
      <p onClick={()=>{
      navigate('/home/home2')
    }}>home2</p>
   </div>
  )
  }
  function Nav(){
  
    return(
     <div className=''>
     订单
     
     </div>
    )
    }
    function Home2(){
  
      return(
       <div className=''>
       2
       
       </div>
      )
      }
      function Home1(){
  
        return(
         <div className=''>
         订单
         
         </div>
        )
        }
    function Mine(){
  let {id} = useParams()
      return(
       <div className=''>
      我的{id}
       
       </div>
      )
      }

function App() {
  
   let [list,setlist] = useState([])
  useEffect(()=>{
    axios.get('http://localhost:3000/list').then((res)=>{
      setlist(res.data)
    })
  },[])
 

  return (<BrowserRouter>
   <Routes>
   <Route index element={<Home/>}>
    
    </Route>
   <Route  element={<Home/>} path='/home'>
      <Route  element={<Home1/> }path='/home/home1'/>
      <Route element={<Home2/> }path='/home/home2'/>
    </Route>
    <Route element={<List/>} path='/list'/>
    <Route element={<Nav/>} path='/nav'/>
    <Route element={<Mine/>} path='/mine/:id'/>
   </Routes>
   <div className='navbox'>
   <div className='tabbar'>
    <Link to='/home'>首页</Link>
    <Link to='/list'>订单</Link>
    <Link to='/nav'>列表</Link>
    <Link to='/mine/id:1'>我的</Link>
 </div>
</div>
   </BrowserRouter>
  )
  
}

export default App
